<template>
  <Card size="small" :class="dbs && dbs.length > 0 ? 'success' : 'error'">
    <template #title> <PieChartFilled :style="{ fontSize: '18px', position: 'relative', top: '1px' }" /> {{ name }} </template>
    <template #extra>
      <router-link :to="{ path: '/db/status', query: { dbIndex: dbIndex } }">
        <Button type="primary" shape="round" :disabled="!dbs || dbs.length == 0"><InfoCircleFilled /> 状态</Button>
      </router-link>
    </template>
    <div class="db-detail">
      <p v-for="(item, index) in dbs">
        <router-link :to="{ name: 'DbDetail', params: { dbIndex: dbIndex, schema: item.Name } }">
          {{ item.Name }}
          <b v-if="item.UsedSpace">{{ friendlyVolume(item.UsedSpace) }}</b>
        </router-link>
      </p>
    </div>
  </Card>
</template>

<script setup>
  import { ref, inject, onMounted } from 'vue';
  import { Card, Button } from 'ant-design-vue';
  import { PieChartFilled, InfoCircleFilled } from '@ant-design/icons-vue';
  import { friendlyVolume } from '@/libs/helpers';

  const props = defineProps({
    name: String,
    dbIndex: {
      type: [String, Number],
      default: '0',
      required: true
    },
    dbType: {
      type: String,
      default: 'mysql',
      required: false
    }
  });

  const http = inject('$http');
  const dbs = ref([]);

  onMounted(() => {
    http.get(`/api/db/${props.dbIndex}/dbs`).then(response => {
      dbs.value = response.datas;
    });
  });
</script>

<style lang="less" scoped>
  .db-detail {
    height: 350px;
    overflow-y: auto;

    > p {
      font-size: 14px;
      line-height: 23px;
      margin-bottom: 0;
      font-weight: 500;
      padding-left: 15px;
      padding-right: 15px;

      &:first-of-type {
        white-space: nowrap;
      }

      a {
        width: 100%;
        display: inline-block;
        line-height: 26px;
        border-bottom: 1px dashed #ccc;

        > b {
          float: right;
        }
      }

      &:last-of-type {
        a {
          border-bottom: none;
        }
      }
    }
  }
</style>
